<template>
  <div ref="myChart" style="height: 100%" />
</template>
<script>
export default {
  name: 'XmssPie',
  props: {
    types: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      myChart: undefined
    }
  },
  created() {},
  mounted() {
    this.drawLine()
    window.addEventListener('resize', this.resize())
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize())
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      var rich = {
        name: {
          color: '#666666',
          fontSize: 14,
          padding: [8, 30, 5, 30],
          fontWeight: '400',
          align: 'left'
        },
        percent: {
          fontSize: 15,
          padding: [5, 30, 8, 30],
          fontWeight: '500',
          align: 'left'
        },
        hr: {
          borderColor: '#DFDFDF',
          width: '100%',
          borderWidth: 1,
          height: 0
        }
      }
      var colorList = ['#0168b7', '#a665c1', '#fe7264', '#40c0db', '#f4943f']
      const sum = this.types.length && this.types.reduce((sum, item) => sum + Number(item.value), 0)
      const data = this.types.length ? this.types : []
      myChart.setOption({
        title: {
          text: '项目总数',
          textStyle: {
            color: '#3154a4',
            fontSize: 14
          },
          top: '40%',
          left: '19%',
          subtext: `${sum}`,
          subtextStyle: {
            fontSize: 14,
            color: '#4282c2'
          },
          textAlign: 'center'
        },
        color: colorList,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          padding: [20, 30, 20, 20],
          top: '1%',
          bottom: '1%',
          right: '10%',
          backgroundColor: '#f5f8ff',
          borderColor: '#dce7f6',
          borderWidth: 1,
          borderRadius: 4,
          itemGap: 22,
          formatter: (name) => {
            var val
            data.forEach((item) => {
              if (item.name == name) {
                val = item.value
              }
            })
            var arr = ['{b|' + name + '}', '{a|' + val + '}']
            return arr.join('')
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                verticalAlign: 'top',
                align: 'right',
                padding: [0, 0, 0, 50]
              },
              b: {
                fontSize: 14,
                align: 'left'
                // padding: [10, 0, 10, 10],
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['42%', '86%'],
            center: ['20%', '50%'],
            label: {
              show: false
            },
            data: this.types || []
          },
          {
            itemStyle: {
              normal: {
                color: '#F2F9F7'
              }
            },
            type: 'pie',
            silent: true, // 取消高亮
            radius: ['36%', '95%'],
            center: ['20%', '50%'],
            hoverAnimation: false, // 取消动画效果
            data: this.types || [],
            label: {
              normal: {
                show: false,
                position: 'inner',
                formatter: (params) => {
                  return '{percent|' + params.percent.toFixed(0) + '%}'
                },
                rich: rich
              }
            },
            z: -1
          }
        ]
      })
      this.myChart = myChart
    },
    resize() {
      this.myChart.resize()
    }
  }
}
</script>

<style scoped>
</style>
